<template>
  <div class="auth-container">
    <h2 v-if="isLoginMode">登录</h2>
    <h2 v-else>注册</h2>

    <form @submit.prevent="isLoginMode ? login() : register()">
      <div>
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="email" required>
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required minlength="5">
      </div>

      <button type="submit">{{ isLoginMode ? '登录' : '注册' }}</button>
    </form>

    <button @click="toggleMode">
      {{ isLoginMode ? '切换到注册' : '切换到登录' }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isLoginMode = ref(true);
const email = ref('');
const password = ref('');

const toggleMode = () => {
  isLoginMode.value = !isLoginMode.value;
};

const login = () => {
  console.log('尝试登录:', email.value, password.value);
  // 这里应该实现登录逻辑，如向后端发送请求。
};

const register = () => {
  console.log('尝试注册:', email.value, password.value);
  // 这里应该实现注册逻辑，如向后端发送请求。
};
</script>

<style>
.auth-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

div {
  margin-bottom: 10px;
}

label {
  margin-right: 10px;
}

input[type="email"],
input[type="password"] {
  width: calc(100% - 22px);
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  margin-top: 10px;
  padding: 10px 15px;
  cursor: pointer;
}
</style>